<template>
	<el-container class="index">
		<el-aside class="aside">
			<navigationMenu :isCollapse="isCollapse"></navigationMenu>
		</el-aside>
		<el-container class="container">
			<el-header class="header">
				<NavHeader @sideContractile="sideContractile" :onoffSide="isCollapse"></NavHeader>
			</el-header>
			<el-main v-if="isRouterAlive" style="overflow-x: hidden;" >
				<!-- <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutRight"> -->
				<!-- class="animated bounceInDown" -->
					<router-view v-wechat-title="$route.meta.title" />
				<!-- </transition> -->
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	let that=''
	//非父子组件传值
	import bus from '../../../static/js/bus.js';
	import {mapActions,mapState} from 'vuex'
	import navigationMenu from '../../components/navigationMenu/navigationMenu.vue'
	import NavHeader from '../header/NavHeader';
	export default {
		components: {
			navigationMenu,
			NavHeader
		},
		data(){
			return{
				isRouterAlive:true,//刷新
				isCollapse:false//是否张开菜单栏
			}
		},
		mounted() {
			that=this
			//刷新主体
			bus.$off('refreshPage')
			bus.$on('refreshPage',(res)=>{
				that.isRouterAlive=false
				that.$nextTick(()=>{
					that.isRouterAlive=true
				})
			})
			//监听窗口
			that.listeningWindow()
		},
		methods:{
			...mapActions(['set_window_size']),
			//监听窗口
			listeningWindow(){
				let that = this;
				//监听窗口大小
				window.onresize = () => {
					return (() => {
						window.screenWidth = document.body.clientWidth;
						//提交到state
						that.set_window_size(window.screenWidth);
					})();
				};
				//获取当前窗口大小
				console.log('当前窗口变化', window.innerWidth);
				//提交到state
				that.set_window_size(window.innerWidth);
				
			},
			//子组件点击收缩侧边栏的参数
			sideContractile(e) {
				console.log(e);
				this.isCollapse = e;
				if (e) {
					if (this.windowSize < 600) {
						this.show_onoff = true; //侧边栏出现
					}
				} else {
					if (this.windowSize < 600) {
						this.show_onoff = true; //侧边栏出现
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.index{
		height: 100%;width: 100%;
		
		.aside{
			background-color: #2299DD;width: initial!important;
		}
		.container{
			// background-color: #00FF00;
			.header{
				background-color: #fff;border-bottom: 1px solid #f0f0f0;z-index: 2;
			}
		}
		
	}
	
</style>
